<template>
    <div class="search">
        <form action="javascript:return true;">
            <input ref="input" :class="{center:isCenter}" type="search" class="iconfont" :readonly=isReadonly :placeholder="placeholderIcon" @input="exportKey(key)" @keydown.13="search(key)" v-model="key">
            <i v-show="key" @click="del" class="del iconfont icon-quxiao"></i>
        </form>
    </div>
</template>
<script>
// import Mydemo from '@/components/mydemo1';//引用模板
// 组件模块
export default {
  name: 'search',
  data () {
    return {
      key: '',
      placeholderIcon: ''
    }
  },
  // 数据接口 type:String Number Boolean Function Object Array Symbol
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    // 是否居中显示
    isCenter: {
      type: Boolean,
      default: false
    },
    isReadonly: {
      type: Boolean,
      default: false
    }
  },
  // 计算属性
  computed: {},
  // 数据监控
  watch: {
    placeholder () {
      this.placeholderIcon = '\ue627 ' + this.placeholder
    }
  },
  // 数据渲染前勾子只执行一次
  mounted () {
    this.placeholderIcon = '\ue627 ' + this.placeholder
  },
  methods: {
    // 输出key
    exportKey (key) {
      this.$emit('exportKey', key)
    },
    // 调取手机键盘的搜索按键执行事件
    search (key) {
      this.$emit('search', key)
      let input = this.$refs.input
      input.blur()
    },
    // 删除key
    del () {
      this.key = ''
      this.$emit('del')
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
/* 这里面写样式 */
.search {
    box-sizing: border-box;
    height: 1.04rem;
    position: relative;
    padding: 0.2rem 0.15rem;
    background-color: #f2f2f2;
    border-bottom: 1px solid #dddee3;
    input {
        height: 0.64rem;
        width: 100%;
        border-radius: 0.2rem;
        padding: 0 0.3rem;
        z-index: 2;
        font-size: 0.3rem;
        background: #fff;
    }
    input::-webkit-input-placeholder {
        color: #8e8e93;
    }
    .center {
        text-align: center;
    }
    .del {
        position: absolute;
        display: inline-block;
        height: 0.36rem;
        line-height: 0.36rem;
        width: 0.36rem;
        background-color: #dddee3;
        color: #fff;
        font-size: 0.36rem;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        right: 0.36rem;
        border-radius: 50%;
    }
}
</style>
